<template>
	
	<div>
		
		<div class="infoCard">
			<img :src="pageData.teamIcon||initImg" width="180" v-radius="'50%'"/>
			<div style="text-align: left;">
				<h1 class="cl-white">{{pageData.teamName||'球队名字...'}}</h1>
				<h4 class="cl-main">学校 : {{pageData.schoolName||'学校名字'}}</h4>
				<h4 class="cl-main">教练 : {{pageData.coach||'教练名字'}}</h4>
			</div>
			<div class="delimiter"></div>
			<div>
				<h1 class="cl-white">{{pageData.times||0}}</h1>
				<div class="cl-main">比赛场次</div>
			</div>
			<div>
				<h1 class="cl-white">{{pageData.goals||0}}</h1>
				<div class="cl-main">进球数</div>
			</div>
			<div>
				<h1 class="cl-white">{{pageData.victory||0}}/{{pageData.draw||0}}/{{pageData.failure||0}}</h1>
				<div class="cl-main">胜/平/负</div>
			</div>
		
			<div>
				<h1 class="cl-white">{{pageData.yellowCard||0}}</h1>
				<div class="cl-main">黄牌</div>
			</div>
			<div>
				<h1 class="cl-white">{{pageData.redCard||0}}</h1>
				<div class="cl-main">红牌</div>
			</div>
			
		</div>
		<h3 class="column-heading">赛事信息</h3>
		
   		<div class="border-1px">
   			<tr class="th">
   				<th v-width=" '5%' ">序号</th>
   				<th>比赛日期</th>
   				<th>状态</th>
   				<th>比赛轮次</th>
   				<th>比赛球队</th>
   				<th>&nbsp</th>
   			</tr>
   			<tr v-for="(item,index) in match" class="bg-cl-list" @click="goto('EventDetails',{id:item.scheduleId})">
   				<td>{{index+1}}</td>
   				<td>{{item.time?(item.time|initDate):'时间'}}</td>
   				<td><span :class="{'end':item.scheduleId}">{{item.scheduleId?'已结束':'未开始'}}</span></td>
   				<td>{{item.groupName||'比赛组别'}}</td>
   				<td>
   					<img v-radius=" '50%' " width="30" :src="item.redTeamIcon||initImg"  />
   					{{item.redTeamName||'神秘球队'}}
   					<b>{{item.redScore}} <b>:</b> {{item.blueScore}}</b>
   					<img v-radius=" '50%' " width="30" :src="item.blueTeamIcon||initImg"  />
   					{{item.blueTeamName||'神秘球队'}}
   				</td>
   				<td v-width=" '5%' "><img width="18px" src="../assets/ic_enter.png" alt="" /></td>
   			</tr>
   		</div>
		<h3 class="column-heading">球员名单</h3>
   		<div class="border-1px">
   			<tr class="th">
   				<th v-width=" '5%' ">排名</th>
   				<th>姓名</th>
   				<th>球衣号</th>
   				<th>跑动距离</th>
   				<th>黄牌</th>
   				<th>红牌</th>
   				<th>进球数</th>
   				<th>总积分</th>
   				
   			</tr>
   			<tr v-for="(item,index) in players" class="bg-cl-list" @click="goto('PlayerDetails',{id:item.userId,name:item.studentName})">
   				<td>
   					<span v-if="index>2">{{index+1}}</span>
   					<img v-if="index==0" src="../assets/jinpai.png"  />
   					<img v-if="index==1" src="../assets/yinpai.png"  />
   					<img v-if="index==2" src="../assets/tongpai.png"  />
   				</td>
   				<td><img :src="item.playerIcon||initImg" v-radius="'50%'" width="30" />{{item.studentName||'球员姓名'}}</td>
   				<td>{{item.cloth||'球衣号'}}</td>
   				<td>{{item.distance||'跑动距离'}}</td>
   				<td>{{item.yellowCard||"黄牌数"}}</td>
   				<td>{{item.redCard||'红牌数'}}</td>
   				<td>{{item.goals||'进球数'}}</td>
   				<td>{{item.score||'总积分'}}</td>
   			
   				
   				
   			</tr>
   		</div>
		
	</div>
	
	
</template>

<script>
	export default{
		name:'TeamDetails',
		props:['teamId','comId'],
		data(){
			return {
				pageData:[],
				players:[],
				match:[]
			}
		},
		computed:{
			
		},
		mounted:function(){
			sessionStorage.navActive='TeamPerformance'
			this.getData()
		},
		methods:{
			goto(str,obj){
				this.$router.push({name:str,params:{id:obj.id,name:obj.name} });
				sessionStorage.navActive='RankingList'
				
			},
			getData:function(){
				this.$axios.post(
					'http://101.37.33.145:3100/weixin/getTeamView.do',
					{
						leagueId:this.comId,
						teamId:this.teamId
					}
				).then(
					res=>{
						console.log('球队详情页请求成功了');
						this.pageData=res.data;
						this.match=res.data.gameRecords;
						this.players=res.data.players
					}
				).catch(
					err=>console.log(err)
				)
			}
		},
		watch:{
			"teamId":function(){
			}
		},
		directives:{
			width:{
				bind:function(el,binding){
					el.style.width=binding.value+''
				}
			},
			radius:{
				bind(el,binding){
					el.style['border-radius']=''+binding.value
				}
			}
		}
	}
</script>

<style scoped="scoped">
	img{
		vertical-align: middle;
	}
	tr{
		min-width: 100%;

	}
	td,th{
		min-width: 80px;
		text-align: center;
		font-size: 14px;
	}
	td{
		line-height: 50px;
		border-bottom: 1px solid #DCDCDC;
		
	}
	td b{
		padding: 0 20px;
		font-size: 16px;
	}
	tr>td:first-of-type{
		color: #00B096;
	}
	.delimiter{
		width: 2px;
		height: 80px;
		margin-top: 10px;
		background: #00B096;
		border-right:1px solid #2C3E50 ;
	}
	.infoCard{
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		padding: 25px 0;
		background:rgb(7,35,45) ;
		background:linear-gradient(left,  rgb(7,35,45) 0%,rgb(10,48,55) 50%,rgba(10,48,66,.9) 75%);
		background:-moz-linear-gradient(left, rgb(7,35,45), rgb(10,48,66));   
   		background:-o-linear-gradient(left, rgb(7,35,45), rgb(10,48,66)); 
		
	}
	.th{
		line-height: 30px;
		background-color: #489DA2;
		color: white;
	}
	.end{
		background-color: #FF6600;
		padding: 5px 15px;
		border-radius:16px ;
		color: white;
	}
	.bg-cl-list:nth-of-type(2n+1){
		background-color: #F7F7F7;
	}
	.bg-cl-list:hover{
		background-color: #F2F2F2;
		
	}
	.cl-white{
		color: white;
	}
	.cl-main{
		color: #01AF96;
	}
	
	/*分栏标题标签*/
		.column-heading{
			position: relative;
			box-sizing: border-box;
			width: 100%;
			height: 42px;
			line-height: 42px;
			margin-bottom: 20px;
			margin-top: 30px;
			overflow: hidden;
			text-indent: 1em;
			font-weight: 400;
			font-size: 16px;
			border-bottom:5px solid #77c2c3;
			border-top-left-radius: 5px;
		}
		.column-heading:before{
			content: "";
			position: absolute;
			z-index:-1;
			top: 0px;
			left: -1em;
			width: 126px;
			height: 42px;
			background-color: #77C2C3;
			border-top-right-radius: 10px;
		}
		.column-heading:after{
			content: '';
			position:absolute ;
			top: 3.5px;
			left: calc(123px - 1em );
			border-left:35px solid  #77C2C3;
			border-top:38px solid transparent;
			/*border-right:34px solid aquamarine;*/
		}
		.border-1px{
			border: 1px solid #DCDCDC;
		}
</style>